'use client'      //带布局系统的组件必须声明为“客户端组件”
import { LeftOutlined,MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { Button, Layout } from 'antd'
import Link from 'next/link'
import React, { useState } from 'react'

export default function({children}) {
  //状态变量 —— 记录左侧的侧边栏当前是否折叠起来了
  let [siderCollapsed, setSiderCollapsed] = useState(false)
  return (
    //使用antd提供的布局系统
    <Layout>
      {/* 左侧：功能菜单 */}
      {/* collapsible：侧边栏是否可以折叠起来，如果设为true，则可以有展开/收起的动画+底部的触发按钮 */}
      {/* collapsed：侧边栏当前处于折叠状态吗？ */}
      {/* trigger：用于自定义触发按钮内容,null表示取消默认提供的折叠按钮 */}
      <Layout.Sider 
        collapsible
        collapsed={siderCollapsed}         
        trigger={null}
        style={{color:'#fff',background:'#0E4A93',height:'100vh'}}>
        左侧侧边栏
      </Layout.Sider>
      {/* 右侧：顶部导航 + 页面主体 */}
      <Layout>
        <Layout.Header style={{color:'#fff',background:'#0E4A93',marginLeft:'1px', paddingLeft:0, display:'flex'}}>
          {/* type="text"：让按钮的外观显示为“文字”样式，但是点击后可以看到类似按钮的背景色 */}
          {/* icon：指定按钮上的图标，使用此属性比直接在按钮内放图标可以产生更紧凑的内边距 */}
          <Button 
            type='text' 
            icon={siderCollapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
            onClick={_=>setSiderCollapsed(!siderCollapsed)}
            style={{fontSize:'16px',width:'64px',height:'64px', color:'#fff'}}/>
          <div style={{flex: 1}}>标题</div>
          <div>右侧</div>
        </Layout.Header>
        <Layout.Content style={{background:'#f5f5f5'}}>
          {children}
        </Layout.Content>
      </Layout>
    </Layout>
  )
}
